import { SmallButton } from '@app-nextmesh/components';
import { NextMeshInputWidget } from '@app-nextmesh/components/Widgets';
import { ITask } from '@app-nextmesh/types';
import CloseIcon from '@mui/icons-material/Close';
import DoneIcon from '@mui/icons-material/Done';
import { Progress, ProgressProps } from 'antd';
import { ReactNode, useCallback, useEffect, useState } from 'react';

import './panel.scss';
import './style.scss'; // children会使用到的样式，目前也在这里导入

interface BaseForm2Props {
  title: string;
  disabled: boolean;
  hideConfirm?: boolean;
  customStyle?: object;
  titleEditable?: boolean;
  progressInfo?: { progress?: number; status: ITask['status'] }; // 进度，0-1
  message?: ReactNode;
  children?: ReactNode;
  footerLeft?: ReactNode;
  footerCenter?: ReactNode;
  footerRight?: ReactNode;
  onClose?: () => void;
  onOk?: () => void;
  updateTitle?: (title: string) => void;
}

export default function BaseForm({
  title: defaultTitle = '',
  disabled,
  titleEditable = true,
  progressInfo,
  message,
  children,
  footerLeft,
  footerCenter,
  footerRight,
  onClose,
  onOk,
  updateTitle,
  hideConfirm,
  customStyle,
}: BaseForm2Props) {
  const [title, setTitle] = useState(defaultTitle);
  useEffect(() => {
    setTitle(defaultTitle);
  }, [defaultTitle]);
  const handleOk = () => {
    onOk?.();
  };
  const handleClose = useCallback(() => {
    onClose?.();
  }, []);
  const handleFocus = () => {
    // inputRef.current.select()
  };
  const onChange = (value: string) => {
    setTitle(value);
    updateTitle?.(value);
  };
  const toProgressStatus = (
    status: ITask['status'],
  ): ProgressProps['status'] => {
    switch (status) {
      case 'STARTED':
      case 'CREATED':
        return 'active';
      case 'FINISHED':
        return 'success';
      case 'CANCELED':
      case 'FAILED':
        return 'exception';
      default:
        return 'normal';
    }
  };
  const custom = customStyle !== undefined ? customStyle : {};
  return (
    <div
      className='nm-panel'
      style={custom}
      tabIndex={0}
      qa-attribute='qa-settingsPanel'>
      <div
        className='nm-toolbar'
        qa-attribute='qa-settingsPanelToolbar'>
        <div className='nm-toolbar-section nm-toolbar-section--left'>
          <h5
            className='nm-titleInput '
            id='nm-titleInput'>
            <NextMeshInputWidget
              // autoComplete="off"
              // className="nm-textInput nm-textInput--lg nm-textInput--stealth"
              maxLength={200}
              value={title}
              onChange={onChange}
              onFocus={handleFocus}
              disabled={!titleEditable || disabled}
              placeholder='请输入名称'
            />
            <i className='fal fa-pen nm-titleInput-editIcon'></i>
          </h5>
        </div>
        <div className='nm-toolbar-section nm-toolbar-section--right'>
          {hideConfirm !== undefined ? (
            ''
          ) : (
            <div className='nm-toolbar-buttonContainer'>
              <SmallButton
                variant='primary'
                onClick={handleOk}
                disabled={title.trim().length === 0 || disabled}>
                <DoneIcon fontSize='small' />
              </SmallButton>
            </div>
          )}

          <div className='nm-toolbar-buttonContainer'>
            <SmallButton onClick={handleClose}>
              <CloseIcon fontSize='small' />
            </SmallButton>
          </div>
        </div>
      </div>
      {progressInfo && progressInfo.status !== 'CREATED' && (
        <Progress
          style={{ padding: '0px 8px' }}
          size='small'
          percent={
            progressInfo.progress != null ? progressInfo.progress * 100 : 100
          }
          status={toProgressStatus(progressInfo.status)}
        />
      )}
      <div
        className='nm-panel__scrollableArea'
        qa-attribute='qa-settingsPanelScrollArea'>
        <div
          className='nm-panel__messages'
          qa-attribute='qa-settingsPanelMessages'>
          {message}
        </div>
        <div
          className='nm-panel__content'
          qa-attribute='qa-settingsPanelFormContainer'>
          <div className='nm-Form-InfoPanelPortalContainer'>
            <div className='nm-form'>{children}</div>
          </div>
        </div>
      </div>
      {(footerLeft || footerCenter || footerRight) && !disabled ? (
        <div className='nm-panel__footer'>
          <div
            className='nm-toolbar'
            qa-attribute='qa-settingsPanelToolbar'>
            <div className='nm-toolbar-section nm-toolbar-section--left'>
              {footerLeft}
            </div>
            <div className='nm-toolbar-section nm-toolbar-section--center'>
              {footerCenter}
            </div>
            <div className='nm-toolbar-section nm-toolbar-section--right'>
              {footerRight}
            </div>
          </div>
        </div>
      ) : (
        <></>
      )}
    </div>
  );
}
